<template>
  <view class="player-container">
    <!-- 顶部视频播放器 -->
    <view class="video-player-wrapper">
      <video id="myVideo" class="video-player" :src="currentEpisode.videoUrl" :controls="true" :autoplay="autoplay"
        :loop="false" @play="onPlay" @pause="onPause" @ended="onEnded" @timeupdate="onTimeUpdate" @error="onError"
        @fullscreenchange="onFullScreenChange"></video>

      <!-- 字幕渲染层 -->
      <view class="subtitle-layer" v-if="showSubtitle && currentSubtitleText">
        <view class="subtitle-text" v-html="currentSubtitleText"></view>
      </view>
    </view>

    <!-- 剧集信息展示区 -->
    <view class="episode-info">
      <h1 class="episode-title">{{ currentEpisode.title }}</h1>
      <view class="episode-meta">
        <text class="publish-date">{{ currentEpisode.publishDate }}</text>
        <text class="separator">|</text>
        <text class="duration">{{ formatDuration(currentEpisode.duration) }}</text>
      </view>
      <view class="actors-list">
        <text class="actors-label">Cast: </text>
        <text v-for="(actor, index) in currentEpisode.actors" :key="index" class="actor-name">
          {{ actor }}{{ index < currentEpisode.actors.length - 1 ? ', ' : '' }}</text>
      </view>
      <view class="episode-description">
        <text>{{ currentEpisode.description }}</text>
      </view>
    </view>

    <!-- 剧集集数选择 -->
    <view class="episodes-section">
      <view class="section-title">Episodes</view>
      <scroll-view scroll-x class="episodes-scroll">
        <view v-for="(episode, index) in episodes" :key="index" class="episode-item"
          :class="{ active: currentEpisodeIndex === index }" @click="selectEpisode(index)">
          {{ index + 1 }}
        </view>
      </scroll-view>

      <!-- 字幕选择控件 -->
      <view class="subtitle-controls" v-if="subtitles.length > 0">
        <text class="subtitle-label">Subtitles: </text>
        <picker @change="onSubtitleChange" :value="currentSubtitleIndex" :range="subtitleOptions">
          <view class="subtitle-picker">
            {{ subtitleOptions[currentSubtitleIndex] || 'Subtitles' }}
          </view>
        </picker>
        <!-- 字幕显示/隐藏开关 -->
        <view class="subtitle-toggle-wrapper">
          <text class="subtitle-toggle-label">Show Subtitles</text>
          <switch class="subtitle-toggle" :checked="showSubtitle" @change="onShowSubtitleChange"></switch>
        </view>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="comments-section">
      <!-- 评论区 -->
      <view class="comment-section">
        <text class="comment-title">Comments ({{ totalComments }})</text>
        <view class="comment-input-wrapper">
          <input class="comment-input" type="text" placeholder="Write your comment..." v-model="newCommentText"
            @confirm="submitComment" />
          <button class="comment-submit-btn" @tap="submitComment">Send</button>
        </view>

        <!-- 评论列表 -->
        <view class="comment-list">
          <view v-for="(comment, index) in comments" :key="comment.id" class="comment-item">
            <view class="comment-header">
              <image class="user-avatar" :src="comment.userAvatar" mode="aspectFill"></image>
              <view class="comment-info">
                <text class="user-name">{{ comment.userName }}</text>
                <text class="comment-time">{{ formatDate(comment.createTime) }}</text>
              </view>
            </view>
            <text class="comment-content">{{ comment.content }}</text>
            <view class="comment-actions">
              <view class="comment-action" @tap="likeComment(index)">
                <uni-icons type="heart" size="16" color="#666"></uni-icons>
                <text class="action-text">{{ comment.likes }}</text>
              </view>
              <view class="comment-action" @tap="toggleReply(index)">
                <uni-icons type="chatbubble" size="16" color="#666"></uni-icons>
                <text class="action-text">{{ comment.replyCount }}</text>
              </view>
            </view>

            <!-- 回复输入框 -->
            <view v-if="replyingTo === index" class="reply-input-wrapper">
              <input class="reply-input" type="text" placeholder="Write your reply..." v-model="replyText" />
              <view class="reply-buttons">
                <button class="reply-cancel-btn" @tap="cancelReply">Cancel</button>
                <button class="reply-submit-btn" @tap="submitReply(index)">Reply</button>
              </view>
            </view>

            <!-- 展开/收起回复按钮 -->
            <view v-if="comment.replies && comment.replies.length > 0" class="toggle-replies-btn"
              @tap="toggleShowReplies(index)">
              <text>{{ showReplies[index] ? 'Hide replies' : 'Show replies' }}</text>
            </view>

            <!-- 回复列表 -->
            <view v-if="comment.replies && comment.replies.length > 0 && showReplies[index]" class="replies-list">
              <view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                <image class="user-avatar reply-avatar" :src="'/static/logo.png'" mode="aspectFill"></image>
                <view class="reply-content-wrapper">
                  <div class="reply-header">
                    <span class="reply-user-name">{{ reply.fromUserName }}</span>
                    <span class="reply-to">to</span>
                    <span class="reply-target-name">{{ reply.toUserName }}</span>
                  </div>
                  <text class="reply-content">{{ reply.content }}</text>
                  <text class="reply-time">{{ formatDate(reply.createTime) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parseSRT, getCueByTime } from '@/utils/srtParser.js';

export default {
  data() {
    return {
      // 视频相关
      autoplay: true,
      currentTime: 0,
      isFullScreen: false,

      // 剧集数据
      episodes: [],
      currentEpisodeIndex: 0,

      // 字幕相关
      subtitles: [],
      currentSubtitleIndex: 0,
      showSubtitle: true, // 默认显示字幕，无需开关按钮
      currentSubtitleText: '',
      subtitleOptions: [],

      // 评论相关
      comments: [],
      displayComments: [],
      newCommentText: '',
      replyText: '',
      replyingTo: -1,
      showReplies: [], // 初始为空数组，默认收起所有回复
      pageSize: 10,
      currentPage: 1,
      hasMoreComments: true
    };
  },

  computed: {
    currentEpisode() {
      return this.episodes[this.currentEpisodeIndex] || {
        title: 'Loading...',
        description: '',
        publishDate: '',
        actors: [],
        duration: 0,
        videoUrl: ''
      };
    },

    totalComments() {
      return this.comments.length;
    }
  },

  onLoad(options) {
    // 从参数中获取剧集ID
    const { episodeId } = options;
    this.loadEpisodeData(episodeId);
    this.loadComments();
  },

  methods: {
    // 加载剧集数据
    loadEpisodeData(episodeId) {
      // 模拟数据 - 实际应用中应从API获取
      this.episodes = [
        {
          id: '1',
          title: 'Mars Stone: Origins',
          description: 'In the distant future, humans discover a mysterious energy stone on Mars. This stone not only possesses enormous energy but also hides unknown secrets. During an accident, team member Li Ming comes into contact with the Mars Stone, changing his fate forever...',
          publishDate: '2025-06-15',
          actors: ['Zhang San', 'Li Si', 'Wang Wu'],
          duration: 1800, // seconds
          videoUrl: '/static/video/1.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '2',
          title: 'Mars Stone: Awakening',
          description: 'Li Ming discovers he has gained extraordinary abilities, but these abilities also bring danger. Meanwhile, a mysterious organization begins tracking him, trying to seize the power within him. Li Ming must protect himself while uncovering the true secret of the Mars Stone...',
          publishDate: '2025-06-22',
          actors: ['Zhang San', 'Li Si', 'Zhao Liu'],
          duration: 1860, // seconds
          videoUrl: '/video/2.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '3',
          title: 'Mars Stone: Truth',
          description: `As the investigation deepens, Li Ming gradually discovers that the Mars Stone is closely related to the origin of human civilization. The mysterious organization's purpose also gradually comes to light—they want to use the power of the Mars Stone to control the entire world...`,
          publishDate: '2025-06-29',
          actors: ['Zhang San', 'Wang Wu', 'Qian Qi'],
          duration: 1920, // seconds
          videoUrl: '/video/3.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '4',
          title: 'Mars Stone: Crisis',
          description: 'Li Ming and his team face unprecedented danger as the mysterious organization sends their most powerful assassins. During their escape, they discover an even bigger conspiracy is brewing...',
          publishDate: '2025-07-06',
          actors: ['Zhang San', 'Li Si', 'Sun Ba'],
          duration: 1890, // seconds
          videoUrl: '/video/1.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '5',
          title: 'Mars Stone: Allies',
          description: 'In their most difficult time, Li Ming meets a group of like-minded allies. Each with different abilities, they decide to jointly fight against the mysterious organization and protect the secret of the Mars Stone...',
          publishDate: '2025-07-13',
          actors: ['Zhang San', 'Wang Wu', 'Zhou Jiu'],
          duration: 1830, // seconds
          videoUrl: '/video/2.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '6',
          title: 'Mars Stone: Memories',
          description: `Through the power of the Mars Stone, Li Ming sees fragments of past memories. These fragments reveal the origin of the Mars Stone and its ancient connection to Earth's civilization...`,
          publishDate: '2025-07-20',
          actors: ['Zhang San', 'Zhao Liu', 'Wu Shi'],
          duration: 1950, // seconds
          videoUrl: '/video/3.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '7',
          title: 'Mars Stone: Betrayal',
          description: 'A traitor appears in the team, and Li Ming falls into a crisis of trust. At a critical moment, he must distinguish between friends and enemies and make difficult choices...',
          publishDate: '2025-07-27',
          actors: ['Zhang San', 'Li Si', 'Zheng Shiyi'],
          duration: 1860, // seconds
          videoUrl: '/video/1.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '8',
          title: 'Mars Stone: Showdown',
          description: 'Li Ming finally faces the leader of the mysterious organization. This decisive battle not only concerns the ownership of the Mars Stone but also the future of humanity...',
          publishDate: '2025-08-03',
          actors: ['Zhang San', 'Wang Wu', 'Wang Shier'],
          duration: 2040, // seconds
          videoUrl: '/video/2.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '9',
          title: 'Mars Stone: Sacrifice',
          description: 'To protect the Mars Stone and the people he loves, Li Ming makes a巨大的 sacrifice. But is the sacrifice worth it? A new threat is quietly approaching...',
          publishDate: '2025-08-10',
          actors: ['Zhang San', 'Zhao Liu', 'Li Shisan'],
          duration: 1980, // seconds
          videoUrl: '/video/3.mov',
          subtitleUrls: [
            { language: 'Chinese', url: '/static/srt/1.srt' },
            { language: 'English', url: '/static/srt/1.srt' }
          ]
        },
        {
          id: '10',
          title: '火星石第十集：新的开始',
          description: 'Everything settles, and Li Ming and his friends welcome a new life. But the story of the Mars Stone is not over; a new adventure awaits them...',
          publishDate: '2025-08-17',
          actors: ['张三', '李四', '王五', '赵六'],
          duration: 2100, // 秒
          videoUrl: '/video/1.mov',
          subtitleUrls: [
            { language: '中文', url: '/srt/1.srt' },
            { language: 'English', url: '/srt/1.srt' }
          ]
        }
      ];

      // 设置默认选中的剧集
      if (episodeId) {
        const index = this.episodes.findIndex(ep => ep.id === episodeId);
        if (index !== -1) {
          this.currentEpisodeIndex = index;
        }
      }

      // 加载字幕
      this.loadSubtitles();
    },

    // 加载字幕文件
    async loadSubtitles() {
      const currentSubtitleUrls = this.currentEpisode.subtitleUrls || [];

      if (currentSubtitleUrls.length === 0) {
        this.subtitles = [];
        this.subtitleOptions = ['无字幕'];
        this.currentSubtitleIndex = 0;
        return;
      }

      // 设置字幕选项
      this.subtitleOptions = currentSubtitleUrls.map(item => item.language);
      this.subtitleOptions.unshift('无字幕');

      // 初始化字幕数组
      this.subtitles = currentSubtitleUrls.map(item => ({
        language: item.language,
        cues: [] // 解析后的字幕数据
      }));

      // 实际加载并解析SRT文件
      try {
        for (let i = 0; i < currentSubtitleUrls.length; i++) {
          const subtitleUrl = currentSubtitleUrls[i].url;

          // 使用uni.request加载SRT文件
          const response = await new Promise((resolve, reject) => {
            uni.request({
              url: subtitleUrl,
              method: 'GET',
              responseType: 'text',
              success: resolve,
              fail: reject
            });
          });


          // 检查响应状态
          if (response.statusCode === 200) {
            // 使用parseSRT解析字幕文本
            const cues = parseSRT(response.data);
            this.subtitles[i].cues = cues;
            console.log(`成功加载并解析字幕: ${currentSubtitleUrls[i].language}`, cues.length, '条字幕');
          } else {
            console.warn(`加载字幕文件失败: ${subtitleUrl}, 状态码: ${response.statusCode}`);
            // 如果加载失败，使用备用字幕数据
            this.subtitles[i].cues = this.getDefaultSubtitles(currentSubtitleUrls[i].language);
          }
        }
      } catch (error) {
        console.error('加载字幕过程中发生错误:', error);
        // 发生错误时，为所有字幕设置默认数据
        for (let i = 0; i < this.subtitles.length; i++) {
          this.subtitles[i].cues = this.getDefaultSubtitles(currentSubtitleUrls[i].language);
        }
      }
    },

    // 获取默认字幕数据（作为后备）
    getDefaultSubtitles(language) {
      if (language === '中文' || language.includes('中')) {
        return [
          { startTime: 0, endTime: 5, text: '欢迎观看火星石' },
          { startTime: 6, endTime: 10, text: '正在加载字幕文件...' },
          { startTime: 11, endTime: 15, text: '请确保字幕文件路径正确' }
        ];
      } else {
        return [
          { startTime: 0, endTime: 5, text: 'Welcome to Mars Stone' },
          { startTime: 6, endTime: 10, text: 'Loading subtitle file...' },
          { startTime: 11, endTime: 15, text: 'Please ensure subtitle file path is correct' }
        ];
      }
    },

    // 选择剧集
    selectEpisode(index) {
      if (index !== this.currentEpisodeIndex) {
        this.currentEpisodeIndex = index;
        this.loadSubtitles();
        // 重置播放器
        this.currentTime = 0;
        this.autoplay = true;

        // 重新加载视频
        const videoContext = uni.createVideoContext('myVideo');
        videoContext.seek(0);
        videoContext.play();
      }
    },

    // 字幕切换
    onSubtitleChange(e) {
      this.currentSubtitleIndex = e.detail.value;
      this.updateSubtitle();
    },



    // 显示/隐藏字幕
    onShowSubtitleChange(e) {
      this.showSubtitle = e.detail.value;
    },

    // 更新当前字幕
    updateSubtitle() {
      if (this.currentSubtitleIndex === 0 || !this.showSubtitle) {
        this.currentSubtitleText = '';
        return;
      }

      const subtitleIndex = this.currentSubtitleIndex - 1;
      if (subtitleIndex >= 0 && subtitleIndex < this.subtitles.length && this.subtitles[subtitleIndex].cues) {
        const cues = this.subtitles[subtitleIndex].cues;
        const currentTime = this.currentTime;

        // 使用getCueByTime函数获取当前应该显示的字幕
        const currentCue = getCueByTime(cues, currentTime);
        this.currentSubtitleText = currentCue ? currentCue.text : '';
      } else {
        this.currentSubtitleText = '';
      }
    },

    // 视频播放事件
    onPlay() {
      console.log('视频开始播放');
    },

    onPause() {
      console.log('视频暂停');
    },

    onEnded() {
      console.log('视频播放结束');
      // 可以在这里实现自动播放下一集
      if (this.currentEpisodeIndex < this.episodes.length - 1) {
        this.selectEpisode(this.currentEpisodeIndex + 1);
      }
    },

    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
      this.updateSubtitle();
    },

    onError(e) {
      console.error('视频播放错误:', e);
      uni.showToast({ title: '视频播放失败', icon: 'none' });
    },

    // 监听视频全屏状态
    onFullScreenChange(e) {
      this.isFullScreen = e.detail.fullScreen;
      // 全屏状态变化时重新更新字幕位置
      this.$nextTick(() => {
        this.updateSubtitle();
      });
    },



    // 加载评论
    loadComments() {
      // 模拟评论数据
      this.comments = [
        {
          id: '1',
          userName: 'Mars Explorer',
          userAvatar: '/static/logo.png',
          content: `This TV series is amazing! The Mars Stone concept is very innovative, looking forward to future developments.`,
          createTime: Date.now() - 3600000,
          likes: 25,
          replyCount: 3,
          replies: [
            {
              id: '1-1',
              fromUserName: 'Sci-Fi Fan',
              toUserName: 'Mars Explorer',
              userAvatar: '/static/logo.png',
              content: `Agreed! Especially the twist at the end of the first episode, so unexpected.`,
              createTime: Date.now() - 1800000
            },
            {
              id: '1-2',
              fromUserName: 'Movie Buff',
              toUserName: 'Mars Explorer',
              userAvatar: '/static/logo.png',
              content: `The special effects are also great, you can't tell it's a low-budget production.`,
              createTime: Date.now() - 900000
            },
            {
              id: '1-3',
              fromUserName: 'Series Hunter',
              toUserName: 'Mars Explorer',
              userAvatar: '/static/logo.png',
              content: 'Where can I watch the full version?',
              createTime: Date.now() - 300000
            }
          ]
        },
        {
          id: '2',
          userName: 'Space Traveler',
          userAvatar: '/static/logo.png',
          content: `The lead actor's performance is good, very immersive. But the plot is developing a bit slowly, hope it speeds up later.`,
          createTime: Date.now() - 7200000,
          likes: 12,
          replyCount: 1,
          replies: [
            {
              id: '2-1',
              fromUserName: 'Patient Viewer',
              toUserName: 'Space Traveler',
              userAvatar: '/static/logo.png',
              content: 'Take it slow, groundwork is important, it will get more exciting later.',
              createTime: Date.now() - 3600000
            }
          ]
        },
        {
          id: '3',
          userName: 'Future Scientist',
          userAvatar: '/static/logo.png',
          content: `As a sci-fi enthusiast, I really appreciate this TV series' vision of future technology, very forward-thinking.`,
          createTime: Date.now() - 86400000,
          likes: 38,
          replyCount: 0,
          replies: []
        }
      ];

      // 初始化显示的评论
      this.updateDisplayComments();
    },

    // 更新显示的评论
    updateDisplayComments() {
      const startIndex = 0;
      const endIndex = this.currentPage * this.pageSize;
      this.displayComments = this.comments.slice(startIndex, endIndex);
      this.hasMoreComments = endIndex < this.comments.length;
    },

    // 加载更多评论
    loadMoreComments() {
      if (this.hasMoreComments) {
        this.currentPage++;
        this.updateDisplayComments();
      }
    },

    // 提交评论
    submitComment() {
      if (!this.newCommentText.trim()) {
        uni.showToast({ title: '评论内容不能为空', icon: 'none' });
        return;
      }

      // 模拟提交评论
      const newComment = {
        id: Date.now().toString(),
        userName: '当前用户',
        userAvatar: '/static/logo.png',
        content: this.newCommentText,
        createTime: Date.now(),
        likes: 0,
        replyCount: 0,
        replies: []
      };

      this.comments.unshift(newComment);
      this.newCommentText = '';
      this.updateDisplayComments();

      uni.showToast({ title: '评论成功', icon: 'success' });
    },

    // 切换回复框
    toggleReply(commentIndex) {
      if (this.replyingTo === commentIndex) {
        this.cancelReply();
      } else {
        this.replyingTo = commentIndex;
        this.replyText = '';
        // 如果开始回复，显示该评论的回复
        if (!this.showReplies.includes(commentIndex)) {
          this.toggleShowReplies(commentIndex);
        }
      }
    },

    // 取消回复
    cancelReply() {
      this.replyingTo = -1;
      this.replyText = '';
    },

    // 提交回复
    submitReply(commentIndex) {
      if (!this.replyText.trim()) {
        uni.showToast({ title: 'Reply content cannot be empty', icon: 'none' });
        return;
      }

      const comment = this.comments[commentIndex];
      if (!comment) return;

      // 模拟提交回复
      const newReply = {
        id: `${comment.id}-${Date.now()}`,
        fromUserName: 'Current User',
        toUserName: comment.userName,
        userAvatar: '/static/logo.png',
        content: this.replyText,
        createTime: Date.now()
      };

      if (!comment.replies) {
        comment.replies = [];
      }

      comment.replies.push(newReply);
      comment.replyCount = comment.replies.length;

      // 展开该评论的回复
      if (!this.showReplies.includes(commentIndex)) {
        this.showReplies.push(commentIndex);
      }

      this.cancelReply();
      uni.showToast({ title: 'Reply successful', icon: 'success' });
    },

    // 点赞评论
    likeComment(commentIndex) {
      const comment = this.comments[commentIndex];
      if (comment) {
        comment.likes = (comment.likes || 0) + 1;
        uni.showToast({ title: '点赞成功', icon: 'success' });
      }
    },

    // 切换显示回复
    toggleShowReplies(commentIndex) {
      const currShow = this.showReplies[commentIndex];
      if (currShow) {
        this.showReplies[commentIndex] = false;
      } else {
        this.showReplies[commentIndex] = true;
      }
    },

    // 格式化时长
    formatDuration(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;

      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      } else {
        return `${minutes}:${secs.toString().padStart(2, '0')}`;
      }
    },

    // 格式化日期
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;

      if (diff < 60000) { // 1 minute
        return 'Just now';
      } else if (diff < 3600000) { // 1 hour
        return `${Math.floor(diff / 60000)}m ago`;
      } else if (diff < 86400000) { // 1 day
        return `${Math.floor(diff / 3600000)}h ago`;
      } else {
        return `${date.getMonth() + 1}/${date.getDate()}`;
      }
    }

  }
}

</script>

<style scoped>
.player-container {
  background-color: #0f0f0f;
  color: #fff;
  min-height: 100vh;
}

/* 视频播放器样式 */
.video-player-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 比例 */
  background-color: #000;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 字幕样式 */
.subtitle-layer {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  padding: 0 20px;
  z-index: 10;
  pointer-events: none;
}

.subtitle-text {
  color: #fff;
  text-align: center;
  font-size: 16px;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
  /* background-color: rgba(0, 0, 0, 0.3); */
  padding: 5px 10px;
  border-radius: 4px;
  max-width: 90%;
  margin: 0 auto;
}

/* 全屏状态下的字幕样式 */
.video-player-wrapper:-webkit-full-screen .subtitle-layer,
.video-player-wrapper:fullscreen .subtitle-layer {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 9999;
}

.video-player-wrapper:-webkit-full-screen .subtitle-text,
.video-player-wrapper:fullscreen .subtitle-text {
  font-size: 24px;
  padding: 10px 20px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

/* 字幕控制样式 */
.subtitle-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #333;
}

.subtitle-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subtitle-label {
  font-size: 14px;
  color: #ccc;
  font-weight: 500;
}

.subtitle-picker {
  background: #333;
  color: #ccc;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid #555;
  min-width: 120px;
  text-align: center;
  transition: all 0.3s ease;
}

.subtitle-picker:active {
  background: #444;
  border-color: #666;
  transform: translateY(1px);
}

/* 剧集信息样式 */
.episode-info {
  padding: 20px;
  /* background-color: #fff; */
  margin-bottom: 10px;
}

.episode-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #ccc;
}

.episode-meta {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #999;
}

.separator {
  margin: 0 10px;
}

.actors-list {
  margin-bottom: 15px;
  font-size: 14px;
  color: #999;
}

.actors-label {
  color: #ccc;
  font-weight: 500;
}

.episode-description {
  font-size: 14px;
  line-height: 1.6;
  color: #999;
}

/* 剧集选择样式 */
.episodes-section {
  background-color: #1e1e1e;
  padding: 15px 20px;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #ccc;
}

.episodes-scroll {
  white-space: nowrap;
}

.episode-item {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
  background-color: #333;
  border-radius: 4px;
  font-size: 14px;
  color: #ccc;
}

.episode-item.active {
  background-color: #FE2B54;
  color: #fff;
}

/* 评论区样式 */
.comments-section {
  background-color: #1e1e1e;
  padding: 15px 20px;
  color: #ccc;
}

.comment-input-wrapper {
  display: flex;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #333;
}

.comment-input {
  flex: 1;
  padding: 8px 12px;
  background-color: #333;
  border-radius: 20px;
  border: 1px solid #555;
  font-size: 14px;
  color: #ccc;
}

.comment-input::placeholder {
  color: #666;
}

.comment-submit-btn {
  margin-left: 10px;
  padding: 0 15px;
  background-color: #FE2B54;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.comment-submit-btn:active {
  background-color: #d41c44;
  transform: scale(0.95);
}

.comment-list {
  margin-bottom: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #333;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #333;
}

.comment-info {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #ccc;
  margin-bottom: 2px;
}

.comment-time {
  color: #666;
  font-size: 12px;
  margin-left: 10px;
}

.comment-content {
  font-size: 14px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  gap: 20px;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #666;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.comment-action:active {
  background-color: #333;
  color: #ccc;
}

.toggle-replies-btn {
  color: #FE2B54;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: right;
}

/* 回复相关样式 */
.reply-input-wrapper {
  margin-top: 10px;
  padding: 10px;
  background-color: #2a2a2a;
  border-radius: 8px;
}

.reply-input {
  width: 100%;
  padding: 8px 12px;
  background-color: #333;
  border: 1px solid #555;
  border-radius: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  color: #ccc;
}

.reply-input::placeholder {
  color: #666;
}

.reply-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.reply-cancel-btn {
  padding: 6px 15px;
  background-color: #333;
  color: #ccc;
  border: none;
  border-radius: 15px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.reply-cancel-btn:active {
  background-color: #444;
}

.reply-submit-btn {
  padding: 6px 15px;
  background-color: #FE2B54;
  color: #fff;
  border: none;
  border-radius: 15px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.reply-submit-btn:active {
  background-color: #d41c44;
}

.replies-list {
  margin-top: 15px;
  padding-left: 10px;
}

.reply-item {
  display: flex;
  padding: 10px 0;
  font-size: 13px;
}

.reply-avatar {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  flex-shrink: 0;
}

.reply-content-wrapper {
  flex: 1;
  background-color: #2a2a2a;
  padding: 8px 12px;
  border-radius: 8px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.reply-user-name {
  color: #FE2B54;
  font-weight: 500;
}

.reply-to {
  color: #666;
  margin: 0 5px;
}

.reply-target-name {
  color: #666;
}

.reply-content {
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 5px;
  font-size: 13px;
}

.reply-time {
  color: #666;
  font-size: 12px;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 15px 0;
  color: #666;
  font-size: 14px;
}
</style>